﻿var socket;
var scheme = document.location.protocol == "https:" ? "wss" : "ws";
var port = document.location.port ? (":" + document.location.port) : "";
var connectionUrl = scheme + "://" + document.location.hostname + port + "/ws";
var vm = new Vue({
    el: '#app',
    mounted() {
        //this.init();
    },
    data: {
        content: "",
        msg: "",
        isConneced: false,
        webSocketState: "未连接",
        socket: socket,
    },
    methods: {
        //连接
        connect: function (e) {
            var roomId = e.currentTarget.id;
            var roomName = e.currentTarget.innerHTML;
            var conStr = connectionUrl + "?room=" + roomId;
            var $t = this;
            this.isConneced = false;
            this.webSocketState = "正在连接";
            socket = new WebSocket(conStr);
            //打开
            socket.onopen = function (event) {
                $t.isConneced = true;
                $t.webSocketState = "已连接(" + roomName +")";
            };
            //关闭
            socket.onclose = function (event) {
                $t.isConneced = false;
                $t.webSocketState = "已关闭," + event.reason;
            };
            //异常
            socket.onerror = $t.$options.methods.updateState;
            //消息传输
            socket.onmessage = function (event) {
                $t.msg = $t.msg += "<p>" + event.data + "</p>";
                var div = document.getElementById("msgBox");
                setTimeout(function () {
                    div.scrollTop = div.scrollHeight;
                }, 1);
            };
        },
        //关闭
        connClose: function () {
            socket.close();
            this.isConneced = false;
            this.webSocketState = "连接关闭";
        },
        //发送
        sendMsg: function (s, e) {
            if (!socket || socket.readyState != WebSocket.OPEN) {
                this.isConneced = false;
                this.webSocketState = "WebSocket未连接";
            }
            if (this.content.length == 0) {
                alert("内容不能为空");
                return;
            }
            socket.send(this.content);
            this.content = "";
        },
        disable: function () {
            //alert("关闭");
            this.isConneced = false;
            this.webSocketState = "连接关闭,请重新登陆";
        },
        enable: function () {
            this.isConneced = true;
            this.webSocketState = "已连接";
        },
        unknown: function (state) {
            this.isConneced = false;
            this.webSocketState = state;
        },
        updateState: function () {
            if (!socket) {
                this.isConneced = false;
                this.webSocketState = "连接关闭,请重新登陆";
            } else {
                switch (socket.readyState) {
                    case WebSocket.CLOSED:
                        this.isConneced = false;
                        //this.webSocketState = "连接已关闭";
                        break;
                    case WebSocket.CLOSING:
                        this.isConneced = false;
                        this.webSocketState = "连接关闭中...";
                        break;
                    case WebSocket.CONNECTING:
                        this.webSocketState = "正在连接...";
                        this.isConneced = false;
                        break;
                    case WebSocket.OPEN:
                        this.isConneced = true;
                        this.webSocketState = "已连接";
                        break;
                    default:
                        this.isConneced = true;
                        this.webSocketState = "未知WebSocket状态：" + socket.readyState;
                        break;
                }
            }
        },
        //关闭
        
    }
})